<template>
  <el-container>
    <el-aside width="auto">
      <common-aside></common-aside>
    </el-aside>
    <el-container>
      <el-header>
        <common-header></common-header>
      </el-header>
      <el-main class="el-main">
          <router-view class="card-box" :style="{animationDuration: 0.5, animationName: animationName }"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from '../components/CommonAside'
import CommonHeader from '../components/CommonHeader'
export default {
  name: 'Main',
  components: {
    CommonAside,
    CommonHeader
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    animationName () {
      let number = Math.round(Math.random() * 10)
      switch (number) {
        case 1:
          return 'fadeIn'
        case 2:
          return 'fadeInDown'
        case 3:
          return 'fadeInLeft'
        case 4:
          return 'fadeInRight'
        case 5:
          return 'fadeInUp'
        case 6:
          return 'fadeInRight'
        case 7:
          return 'lightSpeedInRight'
        case 8:
          return 'fadeInTopRight'
        case 9:
          return 'slideInDown'
        case 10:
          return 'slideInLeft'
      }
    }
  }
}
</script>

<style scoped>
.el-header{
  padding: 0;
}
.el-main{
  background-color: #e6e6e6;
}
:root {
  --animate-delay: 5s;
  --animate-duration: 0.5s;
}
.card-box {
  animation-duration: 0.5s;
}
</style>
